<template>
  <div class="easy-container">
    <a-card class="card">
      <a-row :gutter="1">
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">折线图</div>
            <LineChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">柱状图</div>
            <BarChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">饼图</div>
            <PieChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">散点图</div>
            <ScatterChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">仪表盘</div>
            <GuageChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">漏斗图</div>
            <FunnelChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">K 线图</div>
            <KChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">雷达图</div>
            <RadarChart />
          </div>
        </a-col>
        <a-col :lg="8" :sm="12" :xs="24">
          <div class="card box">
            <div class="title">旭日图</div>
            <SunChart />
          </div>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>
<script lang="ts" setup>
// 导入表格组件
import LineChart from "@/components/charts/line.vue";
import BarChart from "@/components/charts/bar.vue";
import PieChart from "@/components/charts/pie.vue";
import ScatterChart from "@/components/charts/scatter.vue";
import GuageChart from "@/components/charts/gauge.vue";
import FunnelChart from "@/components/charts/funnel.vue";
import KChart from "@/components/charts/candlestick.vue";
import RadarChart from "@/components/charts/radar.vue";
import SunChart from "@/components/charts/sunburst.vue";
</script>
<style lang="less" rel="stylesheet/less" scoped>
.easy-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }

  .box {
    height: 300px;
    overflow: unset;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .title {
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
